<style rel="stylesheet/scss" lang="scss" scoped>
    .model-containter {
        display: flex;
        flex: 1;
        min-height: 100%;
        padding: 20px;
        max-width: 90%;
        box-sizing: border-box;
        flex-direction: column;
    }
</style>
<template>
    <div class="model-containter" id="modelContainter"  v-loading.fullscreen.lock="fullscreenLoading">
        <!--<!--tabs 公用tab -->
        <tabs :target-list="targetList"></tabs>
        <!--hread 组件-->
        <model-hread @screenFn="screenFn" v-if="tabCurrentIndex == 1" @batchExport="batchExport"></model-hread>
        <model-table 
			@filterTabListFn="filterTabListFn" 
			@refresh="refresh" 
			@selectTabList="selectTabList"
			:model-list="modelList" 
			:model-head="modelHead" 
			v-if="load && tabCurrentIndex == 1"
            @setTabHead="setTabHead">
        </model-table>
        <!--设置表头-->
        <tab-list-box v-if="tabCurrentIndex == 2"></tab-list-box>
        <!--分页组件-->
        <current-page :current-page="page" :page-size="pageSize" :page-total="pageTotal" @handleCurrentChange="handleCurrentChange"></current-page>
        
    </div>
</template>
<script>
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import {
        Loading
    } from 'element-ui';

    import tabs from '@/components/tabs/tabs.vue'
    import modelHread from './components/model-hread.vue'
    import modelTable from './components/model-table.vue'
    import tabListBox from './components/tab-list-box.vue'
    import currentPage from '@/components/current-page/current-page.vue'

    export default {
        data() {
            return {
                load: false,
                modelIds: null,
                page: 0,	
				total: 0, 					
                pageSize: 20,					// 一页显示多少条， 默认20条
                pageTotal: 0,					// 一共多少页
				offset: 0,						// 从第几条开始
                targetList: {},
                keyObj: {},
				brandName: null,
				seriesName: null,
				selList: [],
				modelHead: [],				// 获取车型表头信息
				modelList: [],				// 获取车型值信息
				fullscreenLoading: false
            }
        },
        components: {
            tabs,
            modelHread,
            modelTable,
            tabListBox,
            currentPage
        },
        created() {
        	
            this._initProList()
            //this._initProHead()
			

        },
        methods: {
			selectTabList(list) {
				this.selList = list
				console.log(this.selList)
			},
			batchExport() {
				console.log(this.modelList)
				this.$ajax({
					api: 'modelproperty/batchExport',
					params: {
						modelIds: this.selList.join(',')
					}
				}).then(res => {
					console.lof(res)
				})
			},
            handleCurrentChange(page) {
                console.log(page)
				this.offset = ((page+1)-1) * this.pageSize
                this._initProList()
            },
            filterTabListFn(keyId, list) {
                console.log(keyId)
                let value = list.filter((item) => {
                    return item.select
                }).map((i) => {
                    return i.value
                })
                console.log()
                this.keyObj = {
                    [keyId]: value.join(',')
                }
                this._initProList()
            },
            refresh() {
                this._initProList()
            },
            setTabHead() {
                this.targetList = {
                    name: '2',
                    title: '设置表头'
                }
            },
            screenFn(idList, brandObj, seriesObj) {
				console.log(idList)
				console.log(brandObj)
                //console.log(typeof idList)
				this.brandName  =  brandObj ? brandObj.brand : null 
				this.seriesName  =  seriesObj ? seriesObj.series : null 
                this.modelIds = idList ? idList.toString() : null
                this._initProList()
            },
            _initProList() {
                let defaultpra = {
                    offset: this.offset,
                    size: 20,
					modelIds: this.modelIds,
					seriesName: this.seriesName,
					brandName: this.brandName
                }
                this.$get({
                	url: 'model/property/value/',
                	data: defaultpra,
                	callback: result => {
                		console.log(result)
						if(result.status === 200) {
							this.load = true
							this.pageTotal = result.data.total
							this.modelHead = result.data.head
							this.modelList = result.data.values
						}
                	}
                })
//              this.$ajax({
//                  api: 'modelproperty/list',
//                  params: param
//              }).then((res) => {
//					this.fullscreenLoading = false
//                  if (res.status === 200) {
//
//                      this.modelList = res.data.modelList
//                      this.pageTotal = res.data.page.total
//
//                  }
//                  console.log(res)
//              })
            },
            _initProHead() {
                this.$ajax({
                    api: 'modelhead',
                    params: {
                        showSelected: true
                    }
                }).then(res => {
                    console.log(res)
                    if (res.status === 200) {
						res.data.forEach((item,index) => {
							if(item.keyId == 'id'){
								res.data.splice(index ,1)
							}
						})
                        this.modelHead = res.data
                        this.load = true
                    }
                })
            }
        },
        watch: {
        	tabCurrentIndex(val) {
        		if(val == 1) {
        			this._initProList()
            		this._initProHead()
        		}
        	}
        },
        computed: {
            ...mapGetters([
                'tabCurrentIndex'
            ])
        }
    }
</script>
